<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .progress {
        border: solid;
        padding: 5px;
        margin: 10px;
      }
      .progress .bar {
        height: 10px;
        width: 0%;
        background: greenyellow;
      }
    </style>
  </head>
  <body>
    <h1>HELLO Index</h1>
    <!--  -->
    <div class="progress" id="progress">
      <div class="bar" id="progressBar"></div>
    </div>
    <!--  -->
    <video id="videoPlay" style="width: 500px; display: none" controls></video>
    <script src="./axios.min.js"></script>
    <script>
      const request = axios.create({
        baseURL: "http://127.0.0.1:8090/api/",
      });

      request
        .get("/files/7atixn7gmw5feoq/snzzkr3f3s9taz9/12_8_u1KeFOhOsQ.mp4", {
          responseType: "blob",
          timeout: 10000,
          onDownloadProgress(e) {
            progressBar.style.width = (e.loaded / e.total) * 100 + "%";
          },
        })
        .then((res) => {
          progress.style.display = "none";
          videoPlay.style.display = "";
          videoPlay.src = URL.createObjectURL(res.data);
        })
        .catch((err) => console.log(err));
    </script>
  </body>
</html>
